<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='注册',active='home'">
<head th:replace="layout/common::headerFragment(${title},${active})"></head>
<body>
<header th:replace="layout/common::header-body"></header>

<div class="ui main container">
    <div class="ui grid stackable two column" style="min-height: 700px;">
        <div class="twelve wide column">
            <div class="ui segment">
                <div class="ui breadcrumb">
                    <a class="section">主页</a>
                    <div class="divider"> / </div>
                    <a class="active section">注册</a>
                </div>
                <h1>用户注册</h1>
                <form class="ui form" method="post" action="/register" autocomplete="on">
                    <div class="field">
                        <label>用户名</label>
                        <div class="ui left icon input">
                            <input type="text" name="userName" placeholder="用户名" autocomplete="off" th:value="${user!=null?user.getUserName():null}">
                            <i class="user icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>邮箱</label>
                        <div class="ui left icon input">
                            <input type="text" name="email" placeholder="邮箱" autocomplete="off">
                            <i class="envelope outline icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>密码</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="密码" autocomplete="off">
                        </div>
                    </div>
                    <div class="field">
                        <label>确认密码</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="confirmPassword" placeholder="确认密码" autocomplete="off">
                        </div>
                    </div>
                    <div class="field">
                        <span>已有账号？<a href="/login">马上登录</a></span>
                    </div>
                    <button class="ui primary button" type="submit">提交</button>

                    <div class="ui error message"></div>

                </form>
                <div class="ui error message" th:if="${formErrors != null}">
                    <ul class="list"  th:each="item : ${formErrors}">
                        <li th:text="${item.getDefaultMessage()}"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="four wide column">
            <div class="ui segment">
                欢迎注册
            </div>
        </div>
    </div>
</div>

<footer th:replace="layout/common::footer-body"></footer>
<script>
    $('.ui.form')
        .form({
            fields: {
                name: {
                    identifier: 'userName',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入您的用户名'
                        }
                    ]
                },
                email: {
                    identifier: 'email',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入邮箱'
                        },
                        {
                            type: 'email',
                            prompt: "请输入正确的邮箱"
                        }
                    ]
                },
                password: {
                    identifier: 'password',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入密码'
                        }
                    ]
                },
                confirmPassword: {
                    identifier: 'confirmPassword',
                    rules: [
                        {
                            type: 'match[password]',
                            prompt: "两次密码输入不一致，请重新输入"
                        }
                    ]
                }
            }
        });
</script>
</body>
</html>